<template>
  <div class="page1">
    <h2 class="wow" style="visibility: visible">主材优势</h2>
    <div class="tab">
      <div
        class="wow"
        :class="{ active: inivalue == index }"
        @click="upinivalue(index)"
        style="visibility: visible"
        v-for="(item, index) in List"
        :key="index"
      >
        <div>
          <img :src="item.no" alt="" />
          <img :src="item.yes" alt="" />
        </div>
        <p>{{ item.cate }}</p>
      </div>
    </div>
    <div class="swipers wow" style="visibility: visible">
      <swiper
        loop="true"
        @swiper="onSwiper"
        :modules="modules"
        :pagination="pagination"
        @slideChange="onSlideChange"
      >
        <swiper-slide v-for="(item, index) in List" :key="index">
          <div class="wrap">
            <div class="pic">
              <img :src="item.image" alt="" />
            </div>
            <div class="text">
              <h3>{{ item.title }}</h3>
              <h4 class="">{{ item.cate }}</h4>
              <p>{{ item.dis }}</p>
            </div>
          </div>
        </swiper-slide>
        <div class="swiper-pagination pagin"></div>
      </swiper>
    </div>
  </div>
</template>

<script setup>
import { Pagination, A11y } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import { ref } from 'vue'
const pagination = ref({
  el: '.pagin'
})
const modules = ref([Pagination, A11y])
const List = ref([
  {
    image: 'https://www.shbotao.net//uploads/allimg/20211129/9239c2459db776a447fbfe6c0cb1b05c.png',
    title: '高端品牌-战略联盟',
    cate: '产品优势',
    dis: '全球化采购平台，与知名度高的品 牌形成战略联盟。全球化采购平台 与知名度高的品牌形成战略联盟全 球化采购平台，与知名度高的品牌 形成战略联形成战略联形略联盟…',
    no: 'https://www.shbotao.net//uploads/allimg/20211130/5ced9b52706dfb673c93edc9289b2d36.png',
    yes: 'https://www.shbotao.net//uploads/allimg/20211130/fe476242f0b3f56b45a3730334a13b8c.png'
  },
  {
    image: 'https://www.shbotao.net//uploads/allimg/20211129/9239c2459db776a447fbfe6c0cb1b05c.png',
    title: '价格保护',
    cate: '价格优势',
    dis: '签订《主材代购合同》，市场相同产品享价格保护，差价双倍返还。',
    no: 'https://www.shbotao.net//uploads/allimg/20211130/20e03f1e3a3975e91bea65cb8773f251.png',
    yes: 'https://www.shbotao.net//uploads/allimg/20211130/dccb847446b6ed9ba07abad8ec3bebac.png'
  },
  {
    image: 'https://www.shbotao.net//uploads/allimg/20211129/9239c2459db776a447fbfe6c0cb1b05c.png',
    title: '雅阁汇服务流程',
    cate: '配合优势',
    dis: '全程雅阁汇式服务，缜密的《材料进场进度表》，各工序之间井然有序，保证效率。',
    no: 'https://www.shbotao.net//uploads/allimg/20211130/f5e721daa62b52837a32f0d31e23bbaa.png',
    yes: 'https://www.shbotao.net//uploads/allimg/20211130/6d87c7cbe2a73eb9847549841d466d13.png'
  },
  {
    image: 'https://www.shbotao.net//uploads/allimg/20211129/9239c2459db776a447fbfe6c0cb1b05c.png',
    title: '实行统一补/退货',
    cate: '退补优势',
    dis: '材料项目经理统一补退货制度，让客户更省心、省力、省时间。',
    no: 'https://www.shbotao.net//uploads/allimg/20211130/fb0ca6578f075ae0a775abdd895baa64.png',
    yes: 'https://www.shbotao.net//uploads/allimg/20211130/f1173f7f335f183192cb6c40c186bb5a.png'
  },
  {
    image: 'https://www.shbotao.net//uploads/allimg/20211129/9239c2459db776a447fbfe6c0cb1b05c.png',
    title: '多级售后·服务保障',
    cate: '饰后优势',
    dis: '完工后提供材料明细售后服务清单，令售后服务更便捷；主材享最低二年售后保障服务；客户享有饰后三年私人家装保养服务',
    no: 'https://www.shbotao.net//uploads/allimg/20211122/1be07f35cf57db3c7d66a43c8aa7bc09.png',
    yes: 'https://www.shbotao.net//uploads/allimg/20211122/eb12dc3322e3e7df424be3ddd5f770cb.png'
  }
])
const inivalue = ref(0)
const iniswiper = ref(null)
const onSwiper = (swiper) => {
  iniswiper.value = swiper
}

const onSlideChange = (e) => {
  inivalue.value = e.activeIndex
}
const upinivalue = (index) => {
  iniswiper.value.slideTo(index)
  inivalue.value = index
}
</script>

<style>
.cherrypick .page1 .swiper {
  padding-bottom: 1rem;
}
.cherrypick .page1 {
  padding: 1rem 0.3rem;
}

.cherrypick .page1 h2 {
  font-size: 0.56rem;
  font-weight: 700;
  color: #000;
  text-align: center;
  margin-bottom: 0.83rem;
  opacity: 0;
  animation: slide-down-in 1s, fade-in 1s;
  animation-fill-mode: forwards;
}

.cherrypick .page1 .tab {
  display: flex;
  justify-content: space-between;
  padding: 0 0.2rem;
  margin-bottom: 0.7rem;
}

.cherrypick .page1 .tab > div {
  cursor: pointer;
  opacity: 0;
  -webkit-animation: fade-in 1s;
  animation: fade-in 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.cherrypick .page1 .tab > div.active div {
  background: #dd292c;
  box-shadow: 0 0.1rem 0.2rem 0 rgba(236, 84, 0, 0.2);
  border-radius: 50%;
}

.cherrypick .page1 .tab > div.active div img {
  opacity: 0;
}

.cherrypick .page1 .tab > div.active div img:nth-child(2) {
  opacity: 1;
}

.cherrypick .page1 .tab > div div {
  width: 0.9rem;
  height: 0.9rem;
  background: #f1f2f3;
  border-radius: 50%;
  position: relative;
  transition: background 0.3s;
}

.cherrypick .page1 .tab > div div img {
  position: absolute;
  width: 0.42rem;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
}

.cherrypick .page1 .tab > div div img:nth-child(2) {
  opacity: 0;
}

.cherrypick .page1 .tab > div p {
  font-size: 0.24rem;
  font-weight: 700;
  color: #000;
  margin-top: 0.3rem;
}

.cherrypick .page1 .tab > div:first-child {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.cherrypick .page1 .tab > div:nth-child(2) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.cherrypick .page1 .tab > div:nth-child(3) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.cherrypick .page1 .tab > div:nth-child(4) {
  animation-delay: 0.4s;
}

.cherrypick .page1 .tab > div:nth-child(5) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.cherrypick .page1 .swipers {
  position: relative;
  opacity: 0;
  animation: slide-down-in 1s, fade-in 1s;
  animation-fill-mode: forwards;
}

.cherrypick .page1 .wrap {
  position: relative;
  display: flex;
}

.cherrypick .page1 .wrap .pic {
  width: 2.89rem;
  height: 2.89rem;
  border-radius: 0.2rem;
}

.cherrypick .page1 .wrap .pic img {
  width: 100%;
  height: 100%;
  border-radius: 0.2rem;
}

.cherrypick .page1 .wrap .text {
  color: #000;
  border-radius: 0.2rem;
  flex: 1;
  margin-left: 0.15rem;
}

.cherrypick .page1 .wrap .text h3 {
  font-size: 0.38rem;
  font-weight: 700;
}
.cherrypick .page1 .wrap .text h4 {
  font-size: 0.28rem;
  color: #dd292c;
  margin: 0.3rem 0;
}
.cherrypick .page1 .wrap .text p {
  font-size: 0.24rem;
  font-weight: 400;
  line-height: 0.36rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
</style>